<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建收件夹</title>
    <script src="js/jquery/jquery-3.4.1.min.js"></script>
</head>
<style>
    .header{
        width: auto;
        height: 80px;
        background-color: lightskyblue;
    }

    .title{
        color: white;
        float: left;
        margin-left: 20px;
    }

    .header:after .content:after{
        clear: both;
    }


    /* 下拉按钮样式 */
    .dropbtn {
        background-color: rgba(224, 222, 222, 0.6);
        color: black;
        padding: 16px;
        border: none;
        font-size: 16px;
        cursor: pointer;
        border-radius: 2px;
        width: 155px;
    }

    .dropdown {
        position: relative;
        display: inline-block;
        margin-left: 70%;
        margin-top: 10px;
    }

    /* 下拉内容*/
    .dropdown-content {
        /* 默认隐藏*/
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    /* 下拉菜单的链接 */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    /* 鼠标移上去后修改下拉菜单链接颜色 */
    .dropdown-content a:hover {background-color: #f1f1f1}

    /* 在鼠标移上去后显示下拉菜单 */
    .dropdown:hover .dropdown-content {
        display: block;
    }

    /* 下拉内容显示时下拉按钮的颜色需要改变*/
    .dropdown:hover .dropbtn {
        background-color: #82bbee;
    }

    .folder{
        width:1000px;
        margin: auto;
        border: 1px solid honeydew;
    }

    .folderName{
        margin-top: 10px;
        width: auto;
        height: 150px;
        font-size: 28px;
        background-color: cadetblue;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .folderDescribe,.fileName,.deadline{
        margin: 10px auto auto;
        width: 900px;
        font-size: 20px;
        text-align: left;
    }

    .folderDescribe:after{
        clear: both;
    }

    .text-area{
        width: 500px;
        border: 1px solid gray;
        text-shadow: gray;
        border-radius: 3px;
        vertical-align: middle;
        margin-left: 100px;
    }

    .text-area:focus{
        border: 1px solid #82bbee;
        outline: none;
    }

    img{
        cursor: pointer;
    }\][]
    .date{
        font-size: 20px;
    }

    .foot{
        margin: auto;

    }

    .pre,.next{
        margin-top: 20px;
        height: 50px;
        width: 200px;
        font-size: 24px;
        background-color: white;
    }
    .next{
        margin-left: 200px;
        border: 1px solid green;
        color: cadetblue;
    }

    .pre{
        border: 1px solid palevioletred;
        color: palevioletred;
    }

</style>
<body>
<div class="main">
    <div class="header">
        <h2 class="title">快速创建收件夹</h2>
        <div class="dropdown">
            <button class="dropbtn">个人中心</button>
            <div class="dropdown-content">
                <a href="/index">返回主页</a>
                <a href="/to_change_password">修改密码</a>
                <a href="/exit">退出登录</a>
            </div>
        </div>
    </div>
    <div class="folder">
        <div class="folderName">
            <span class="defaultName" id="name">设置收件名称</span><img src="img/编辑.png" id="edit_name">
        </div>
        <div class="folderDescribe">
            <label for="describe" style="float: left">收件说明：</label>
            <div id="describe" class="text-area" contenteditable="true"></div>
        </div>
        <div class="fileName">
            <label>提交文件命名规则：</label><br>
            <input type="checkbox" name="fileName" id="one" value="one"><span id="first">企业名称</span><img src="img/编辑.png" id="firstName">
            <label>+ </label>
            <input type="checkbox" name="fileName" id="two" value="two"><span id="second">提交人姓名</span><img src="img/编辑.png" id="secondName">
            <label>+ </label>
            <input type="checkbox" name="fileName" id="three" value="three" checked="checked"><label for="three">文件名</label>
        </div>
        <div class="deadline">
            <span>提交截止日期：</span><br>
            <input type="datetime-local" class="date" id="datetime">
        </div>
        <div class="foot">
            <input type="button" onclick="function f() {
              location.href = '/driver'
            } f()" value="上一步" class="pre">
            <input type="button" onclick="submitFolder()" value="下一步" class="next">
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
        $('#name').click(function () {
            var input = $("<input type='text' placeholder='设置收件名称'/>");
            clickChangeName($(this),input)
        })

        $('#edit_name').click(function () {
            var input = $("<input type='text' placeholder='设置收件名称'/>");
            clickChangeName($('#name'),input)
        })

        $('#firstName').click(function () {
            var input = $("<input type='text'>");
            clickChangeName($('#first'),input)
        })

        $('#secondName').click(function () {
            var input = $("<input type='text'>");
            clickChangeName($('#second'),input)
        })

        function clickChangeName(para,input) {
            var span = para
            var html = span.html();
            span.html(input);//附上input
            //自动获取焦点
            input.trigger("focus");
            //文本框失去焦点变回来
            input.blur(function () {
                var val = $(this).val();
                if (val.length == 0) {
                    span.html(html);
                } else {
                    span.html(val);
                }
            })
            //再次点击不变
            input.click(function () { return false; });
            input.css("font-size","28px");
        }

        $('input:checkbox').click(function () {
            var checkbox = $("input[type='checkbox']");
            var checkOne = false
            checkbox.each(function(i) {
                if (this.checked == true) {
                    checkOne=true;
                }
            })
            if (!checkOne){
                $('#three').prop("checked",true)
            }
        })

        $('#datetime').focusout(function () {
            var time = $(this).val()
            var date = new Date(time);
            var second = date.getTime();
            var now = Date.now();
            //时间应该大于此刻
            if (second < now){
                $(this).val("")
            }
        })
    })

    function submitFolder() {
        var name = $("#name").text()
        if(name == ""){
            alert("请输入文件夹名")
            return;
        }
        var describe = $("#describe").text()
        if(describe == ""){
            alert("请输入描述")
            return;
        }
        var one = $("#one")[0].checked
        var first = $("#first").text()
        var two = $("#two")[0].checked
        var second = $("#second").text()
        var three = $("#three")[0].checked
        var datetime = $("#datetime").val()
        if(datetime == ''){
            alert("请输入时间")
            return
        }
        $.ajax({
            url:"/add_folder_submit",
            data:{
                one: one,
                two: two,
                three: three,
                name: name,
                describe: describe,
                first: first,
                second: second,
                datetime: new Date(datetime).getTime() / 1000,
                panIndex :getQueryString("index"),
            },
            success:function (res) {
                location.href="share_link?folder_key="+res["suc"];
            },
            error:function (e) {
                alert("失败")
            }

        })
    }

    function uploadFolder() {

    }

    function getQueryString(name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        let r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return decodeURIComponent(r[2]);
        };
        return null;
    }

</script>
</html>